<template>
    <div class="app">
        <h3 class="cll_h3">新增</h3>
        <hr />
        <el-form :model="form" label-width="120px" style="max-width: 460px" >
            <el-form-item label="餐品名称:" width="400px">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="餐品分类:">
                <el-select v-model="form.category" placeholder="男士餐">
                    <el-option label="男士餐" value="1" />
                    <el-option label="女士餐" value="2" />
                    <el-option label="工作餐" value="3" />
                </el-select>
            </el-form-item>

            <el-form-item label="金额:" width="400px">
                <el-input v-model="form.price" />
            </el-form-item>
            <el-form-item label="包含次数" width="400px">
                <el-input v-model="form.times" />
            </el-form-item>
            <el-form-item label="排序" width="400px">
                <el-input v-model="form.paix" />
            </el-form-item>

            <el-form-item label="启用状态" width="400px">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio label="是" size="large">是</el-radio>
                    <el-radio label="否" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="海报:" width="400px">
                <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form :inline="true">
                <el-form-item>
                    <button @click.stop.prevent="reset">重置</button>
                </el-form-item>
                <el-form-item>
                    <button @click.stop.prevent="save">保存</button>
                </el-form-item>
                <el-form-item>
                    <button @click.stop.prevent="cancel">取消</button>
                </el-form-item>
                </el-form>
        </el-form>
    </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import {defineComponent} from 'vue'
import {imageapi} from '@/api/cuisine'
export default defineComponent ({
    name: '',
    data() {
        return {
            form: {
                name:'',
                region:'',
                price:'',
                number:'',
                paix:'',

            },
            imageUrl: '',
            radio1:'',
        }
    },
   async created(){
        
      if(this.form.name){
        this.form=this.$route.query
       console.log(this.form)
         const res=await imageapi()
        // console.log(res.list[0].bill)
        this.imageUrl = res.list[0].bill
      }else{
        const res=await imageapi()
        // console.log(res.list[0].bill)
        this.imageUrl = res.list[0].bill
      }

    },
    methods:{
    handleAvatarSuccess(response, uploadFile) {
      console.log('response:', response)
      this.user.avatarUrl = response.data.file
      this.imageUrl = URL.createObjectURL(uploadFile.raw)
    },
        beforeAvatarUpload(rawFile) {
      if (rawFile.type !== 'image/jpeg') { // 格式
        ElMessage.error('只能上传jpg格式的图片!')
        return false
      }
      if (rawFile.size / 1024 / 1024 > 2) { // 大小
        ElMessage.error('文件大小不能超过2MB!')
        return false
      }
      return true
    },
        reset() {
            this.form.region=''
            this.form.price=''
            this.form.number=''
            this.form.paix=''
            this.form.name=''
        
            
        },
        //保存编辑
        save() {

        },
        cancel() {
            this.$router.back()
        },
    },
    components:{
        Plus
    }
})
</script>

<style  scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

button{
    width: 70px;
    height: 30px;
    background-color: #999;
    color: #fff;
    border:none
}
:deep(.el-input){
    width: 300px;
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

</style>